import { Button, Modal, Table } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { TableProps } from "antd";
import dayjs from "@/utils/dayjs";
import { TZ } from "@/utils/env";
import { changeModal, getClassifyAsync } from "@/store/gameClassify/gameClassifySlice";
import { deleteApi } from "@/store/gameClassify/gameClassifyAPI";
import { getConfigAsync } from "@/store/app/appSlice";

export interface DataType {
  class_id: number;
  c_time: number,
  class_order: number,
  class_state: number,
  cn_name: string,
  en_name: string,
  icon: string,
  pt_name: string,
  channel: number
}

export default function MTable() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.gameClassify);
  const {
    config: { data: { data: { switch_conf = [], user_channel_list = [] } = {} } = {} } = {},
  } = useAppSelector((state) => state.app);

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "分类ID",
      dataIndex: "class_id",
      key: "class_id",
      align: "center",
    },
    {
      title: "创建时间",
      dataIndex: "c_time",
      key: "c_time",
      align: "center",
      render: (text) => dayjs.unix(text).tz(TZ).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "渠道",
      dataIndex: "channel",
      key: "channel",
      align: "center",
      render: text => user_channel_list?.find?.(i => i.value === text)?.label
    },
    {
      title: "中文名",
      dataIndex: "cn_name",
      key: "cn_name",
      align: "center",
    },
    {
      title: "英语名",
      dataIndex: "en_name",
      key: "en_name",
      align: "center",
    },
    {
      title: "葡语名",
      dataIndex: "pt_name",
      key: "pt_name",
      align: "center",
    },
    {
      title: "分类排序",
      dataIndex: "class_order",
      key: "class_order",
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "class_state",
      key: "class_state",
      align: "center",
      render: text => switch_conf?.find?.(i => i.value === text)?.label
    },
    {
      title: "操作",
      dataIndex: "opt",
      key: "opt",
      align: "center",
      render: (_text, record) => {
        return <Button.Group size="small">
          <Button type="primary" ghost onClick={() => {
            dispatch(changeModal({
              type: 'update',
              open: true,
              record
            }))
          }}>编辑</Button>
          <Button type="primary" danger onClick={() => {
            Modal.confirm({
              title: '确认删除吗？',
              onOk: () => new Promise<void>((resolve, reject) => {
                deleteApi({
                  class_id: record?.class_id
                }).then(() => {
                  resolve()
                  dispatch(getClassifyAsync({...params}))
                  dispatch(getConfigAsync({}))
                }).catch(reject)
              })
            })
          }}>删除</Button>
        </Button.Group>;
      },
    },
  ];

  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      dataSource={table?.data?.data || []}
      size="small"
      rowKey="class_id"
    />
  );
}
